<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 20px;
    }

    .main {
        width: 525px;
        margin-left: auto;
        margin-right: auto;
    }

    .hr_1 {
        font-size: 14px;
        font-weight: bold;
        color: #3275c3;
        height: 35px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #3275c3;
        vertical-align: bottom;
        padding-left: 12px;
    }

    .left {
        text-align: right;
        width: 80px;
        height: 25px;
        padding-right: 5px;
    }

    .center {
        width: 280px;
    }

    .in {
        width: 130px;
        height: 16px;
        border: solid 1px #79abea;
    }

    .red {
        color: #cc0000;
        font-weight: bold;
    }

    div {
        color: #F00;
    }
</style>

<script type="text/javascript">
    /*
     1.	校验用户不为空，必须是6位以上字母数字组合 鼠标失去焦点验证
     */
    function checkUser(){
        //获取用户名文本框的值
        var value = document.getElementById("user").value;
        //定义用户名规则
        var gz = /^[a-zA-Z0-9]{6,10}$/;
        //获取提示用户 名信息span标签
        var span = document.getElementById("user_info");
        //判断是否符合规则,打印对应的信息
        if(gz.test(value)){
            //信息写在span中
            span.innerHTML="用户名规则正确";
            span.style.color="green";
            document.getElementById("user").style.border="2px solid green";
        }else{
            span.innerHTML="校验用户不为空，必须是6-10位字母数字组合";
            span.style.color="red";
            document.getElementById("user").style.border="2px solid red";
        }
    }


    /*
     * 验证密码  6-20位,必须是数字或者字母
     */
    function checkPass(){
        //获取密码输入框的值
        var value = document.getElementById("pwd").value;
        //定义密码规则
        var gz = /^[a-zA-Z0-9]{6,20}$/;
        //获取块级元素标签 span
        var span = document.getElementById("pwd_info");
        //判断是否正确,并打印对应的数据
        if(gz.test(value)){
            span.innerHTML="密码符合规则";
            span.style.color="green";
            document.getElementById("pwd").style.border="2px solid green";

        }else{
            span.innerHTML="密码不符合规则"
            span.style.color="red";
            document.getElementById("pwd").style.border="2px solid red";
        }
    }


    /*
     * 验证电子邮件
     */
    function checkEmail(){
        //获取电子邮件输入框的值
        var value = document.getElementById("email").value;
        //定义规则
        var gz = /^[a-zA-Z0-9_]+@[a-z0-9]+\.[a-z]+$/;
        //获取Span对象
        var span = document.getElementById("email_info")
        //判断是否符合规则,并打印相应的数据
        if(gz.test(value)){
            span.innerHTML="邮件符合规则";
            span.style.color="green";
            document.getElementById("email").style.border="2px solid green";
        }else{
            span.innerHTML="邮件不符合规则";
            span.style.coler="red";
            document.getElementById("email").style.border="2px solid red";
        }

    }

</script>

<body>

<form action="" method="post" id="myform">
    <table class="main" border="0" cellspacing="0" cellpadding="0">

        <br>
        <br>
        <br>
        <br>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>

                        <td class="left">用户名：</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <br><span id="user_info"></span>
                        </td>
                    </tr>
                    <tr>

                        <td class="left">密码：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" onblur="checkPass()"/>
                            <br /><span id="pwd_info"></span>
                        </td>
                    </tr>
                    <tr>

                        <td class="left">确认密码：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>

                        <td class="left">电子邮箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in" onblur="checkEmail()"/>
                            <br /><span id="email_info"></span>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</form>

</body>
</html>